<template>
  <div class="purchase">
    <header class="title text-overflow">
      <time>{{purchase.releaseTime | timeFlier('yyyy-MM-DD')}}</time>
      <i class="tag">采购</i>
      <span class="text-overflow" :title="purchase.productTypeLastName">{{ purchase.productTypeLastName }}</span>
      <!--<span class="text-overflow" :title="purchase.materialQualityName">{{ purchase.materialQualityName }}</span>-->
      <!--<span class="text-overflow" :title="purchase.standardName">{{ purchase.standardName }}</span> /-->/
      <span class="text-overflow" :title="purchase.productNum + purchase.productNumUnitName">{{ purchase.productNum
        }}{{ purchase.productNumUnitName }}</span>
    </header>

    <div class="content">
      <ul>
        <li>
          <label class="key">品位(%):</label>
          <span class="value text-overflow" :title="purchase.mineralsStandard">{{ purchase.mineralsStandard }}</span>
        </li>
        <li>
          <label class="key">交货地:</label>
          <span class="value text-overflow"
                :title="purchase.tradeAddr">{{ purchase.tradeAddr }}</span>
        </li>

        <li class="purchaser">
          <label class="key">产地:</label>
          <a class="value text-overflow" :title="purchase.productFrom">{{purchase.productFrom | cutStr(24) }}</a>
        </li>
        <li>
          <label class="key">截止日期:</label>
          <span class="value text-overflow">{{ purchase.validTimeEnd | timeFlier('yyyy-MM-DD') }}</span>
        </li>

        <li class="remarks">
          <label class="key">备注:</label>
          <span class="value text-overflow">{{ purchase.memo }}</span>
        </li>
      </ul>

      <p class="login">
        <a href="#" class="company-name">{{purchase.companyName}}</a>

        <span v-if="!user.userId" class="login-tip">
          <a :href="centerAddress" class="text-primay login-link" @click.prevent="showLogin()">登录</a>后可查看联系方式
        </span>

        <span v-else>
          <span class="user-name"><i class="icon icon-user"></i>{{ purchase.commPerson }}</span>
          <span><i class="icon icon-phone-colour"></i>{{ purchase.tel }}</span>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
  import address from '~/config/index'

  export default {
    props: {
      user: {
        type: Object,
        'default' () {
          return {}
        }
      },
      purchase: {
        type: Object,
        'default' () {
          return {}
        }
      }
    },

    data () {
      return {
        centerAddress: address.CENTER_ADDRESS
      }
    },

    methods: {
      // 显示登录框
      showLogin (url) {
        if (url != undefined) {
          this.$store.commit('SET_OPEN', {opend: true, openurl: url})
        } else {
          this.$store.commit('SET_OPEN', {opend: true})
        }
      }
    },

    mounted () {
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../element-variables.scss";
  @import "../assets/scss/util.scss";

  .purchase {
    padding: 20px;
    font-size: 14px;
    background-color: #fff;
    margin-top: 10px;
    border: 1px solid #dedede;

    &:hover {
      border-color: $--color-primary;
      .tag {
        background-color: $--color-primary;
      }
    }

    .tag {
      background-color: #e8af68;
    }
  }

  .title {
    padding: 10px 0 16px;
    font-size: 16px;
    color: #3e3e3e;

    time {
      float: right;
      color: #6e6e6e;
    }

    .tag {
      margin-right: 15px;
    }

    span {
      max-width: 25%;
      display: inline-block;
      vertical-align: middle;
      padding-right: 5px;
    }
  }

  .login-link {
    padding-right: 5px;
  }

  .content {
    ul {
      overflow: hidden;
    }
    li {
      float: left;
      line-height: 28px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:first-child {
        width: percentage(140/550);
      }

      &:nth-child(2) {
        width: percentage(125/550);
      }

      &:nth-child(3) {
        width: percentage(125/550);
      }

      &:nth-child(4) {
        width: percentage(160/550);
      }
    }

    .remarks {
      width: 100%;
    }

    .status, .key {
      position: relative;
      top: 2px;
    }

    .key {
      color: #9e9e9e;
    }

    .value {
      color: #6e6e6e;
      padding-left: 10px;
      position: relative;
      padding-right: 6px;
      vertical-align: middle;
      max-width: 200px;
    }

    .icon {
      margin-right: 5px;
      position: relative;
      top: -1px;
    }
  }

  .login {
    margin-top: 14px;
    padding: 13px 10px;
    background-color: #f5f5f5;
    color: #3e3e3e;

    .login-tip {
      color: #6e6e6e;
    }

    .company-name {
      max-width: 240px;
      @extend .text-overflow;
      padding-right: 60px;
    }

  }

  .user-name {
    padding-right: 30px;
  }

</style>
